<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="pdf预览" name="pdf"></el-tab-pane>
      <el-tab-pane label="word预览" name="word"></el-tab-pane>
      <el-tab-pane label="excel预览" name="excel"></el-tab-pane>
    </el-tabs>

    <div v-if="activeName == 'pdf'" class="box">
      <VueOfficePdf
          src="TEST-1759116431968.pdf"
          @rendered="onRendered"
          @error="onError"
      />
    </div>

    <div v-if="activeName == 'word'" class="box">
      <VueOfficeDocx
          src="test123456.docx"
          @rendered="onRendered"
          @error="onError"
      />
    </div>

    <div v-if="activeName == 'excel'" class="box">
      <VueOfficeExcel
          src="test654321.xlsx"
          @rendered="onRendered"
          @error="onError"
      />
    </div>
  </div>
</template>

<script>
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'

//引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

export default {
  data(){
    return{
      activeName: 'pdf',
    }
  },
  components: {
    VueOfficePdf,
    VueOfficeDocx,
    VueOfficeExcel
  },
  methods: {
    onRendered(){
      console.log("🎉 文档渲染完成！");
    },

    onError(error){
      console.error("❌ 渲染文档时出错:", error);
    }
  }
}
</script>

<style scoped>
.box{
  margin: 0 10px;
  height: 700px;
  overflow-y: auto;
}
</style>